<template>
  <div>
    <div ref="chart" style="width: 260px; height: 200px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      chartData: [
        { name: '风险上升', value: 20 },
        { name: '风险稳定', value: 80 },
        { name: '风险下降', value: 30 },
      ],
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chart)

      const option = {
        /* tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        }, */
        grid: {
          left: '5%', // 调整 Y 轴位置
          right: '5%',
          top: '10%',
          bottom: '30%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          axisTick: { show: false },
          axisLabel: {
            color: '#ABD5FF',
            fontSize: 10,
            fontWeight: 500,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1970F6',
              width: 0.2,
              type: 'solid',
            },
          },

          data: this.chartData.map((item) => item.name),
        },
        yAxis: {
          type: 'value',
          //data: [0, 20, 40, 60, 80, 100],
          min: 0, // 最小值
          max: 100, // 最大值
          interval: 20, // 刻度间隔
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1970F6',
              width: 0.2,
              type: 'solid',
            },
          },
          axisLabel: {
            color: '#ABD5FF',
            fontSize: 10,
          },
          splitLine: {
            show: false, // 隐藏网格线
          },
        },
        series: [
          {
            // name: '数量',
            type: 'bar',
            barWidth: 15,
            data: this.chartData.map((item) => item.value),
            itemStyle: {
              color: function (params) {
                // 根据不同的数据项返回不同的颜色
                const colorList = ['#FF5E5E', '#026CDB', '#5DE283']
                return colorList[params.dataIndex]
              },
            },
          },
        ],
      }

      chart.setOption(option)

      // 响应式调整图表大小
      window.addEventListener('resize', function () {
        chart.resize()
      })
    },
  },
}
</script>

<style scoped>
/* 可以根据需要添加一些样式 */
</style>
